<template>
  <div class="tabs">
    <!--命名路由-->
    <ul>
      <!--this inspection reports XML/HTML tags with missing mandatory attrbutes ,you can specify attrbute name that should not  be reported-->
      <!--home被点击后，一直处于激活状态，因此需要使用精确匹配模式，在router-link中添加exact属性-->
      <router-link :to="{name:'Home'}" tag="li" exact>
        <div>
          <i class="el-icon-s-home"></i>
        </div>
        <div>首页</div>
      </router-link>
      <router-link :to="{name:'Search'}" tag="li">
        <div>
          <i class="el-icon-search"></i>
        </div>
        <div>发现</div>
      </router-link>
      <router-link :to="{name:'Order'}" tag="li">
        <div>
          <i class="el-icon-s-order"></i>
        </div>
        <div>订单</div>
      </router-link>
      <router-link :to="{name:'User'}" tag="li">
        <div>
          <i class="el-icon-user"></i>
        </div>
        <div>我的</div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Tabbar'
}
</script>

<style scoped>
.tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 4px #000;
  width: 100%;
}
.tabs > ul,
.tabs > ul > li {
  margin: 0;
  padding: 0;
}
ul {
  display: table;
  width: 100%;
}
li {
  text-align: center;
  font-size: 16px;
  display: table-cell;
  cursor: pointer;
}
.router-link-active {
  color: #409eff;
}
/* ul > div {
  font-size: 14px;
} */
i {
  font-size: 30px;
}
</style>